<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="home-main-hua">
      <div class="home-image">
        <van-swipe :autoplay="2000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="home-navlist">
        <li
          v-for="(item, index) in navList"
          :key="index"
          @click="navLick(index)"
        >
          <img :src="item.icon" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </div>
      <!-- 三个内容的盒子 -->
      <div class="home-box-row">
        <!-- 好书推荐部分 -->
        <div class="home-row1">
          <div class="row1-top">
            <h2>好书推荐</h2>
            <p>
              
            </p>
          </div>
          <!-- 好书推荐中的所有书 -->
          <div class="row1-alive">
            <div class="row1-alive-dong">
              <div
                class="some-book"
                v-for="(item, index) in $store.state.homes.data"
                :key="index"
                @click="xq(item, $route.path)"
              >
                <img :src="item.book_img_url" alt="" />
                <h4>{{ item.bookname }}</h4>
                <p>{{ item.see_num }}次</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 会员分享部分 -->
        <div class="home-row2">
          <div class="row1-top">
            <h2>会员专享</h2>
            <p>
              
            </p>
          </div>
          <div class="row2-main">
            <div
              class="row2-main-alive"
              v-for="(item, index) in vipBooks"
              :key="index"
              @click="xq(item, $route.path)"
            >
              <div class="main-alive-image">
                <img :src="item.book_img_url" />
                <p class="xiao">
                  <span class="iconfont icon-biao"></span>{{ item.see_num }}
                </p>
              </div>
              <div class="main-alive-right">
                <h3>{{ item.bookname }} <span>完结</span></h3>
                <p class="jies">{{ item.describes }}</p>
                <div class="right-bott">
                  <div class="right-left">
                    <p>{{ item.name }}</p>
                    <p class="leix">
                      <span>{{ item.typesname[0] }}</span>
                    </p>
                  </div>
                  <p class="fen">{{ item.score }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 掌上热搜榜 -->
        <div class="home-row3">
          <div class="row1-top">
            <h2>掌上热搜榜</h2>
            <p>
              
            </p>
          </div>
          <div class="row3-main">
            <div
              class="row3-main-alive"
              v-for="(item, index) in hotBooks"
              :key="index"
              @click="xq(item, $route.path)"
            >
              <div class="row3-main-alive-left">
                <img :src="item.book_img_url" alt="" />
              </div>
              <div class="row3-main-alive-right">
                <h2>{{ item.bookname }}</h2>
                <p>{{ item.describes }}</p>
                <p>{{ item.see_num }}万</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <NavListPage v-if="alertFlage" />
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as API from "../../api/index";
import { myMixins } from "@/mixins/homeMixins.js";
import NavListPage from "./navListPage.vue";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  mixins: [myMixins],
  components: {
    NavListPage,
  },
  name: "",
  data() {
    return {
      msg: "测试",
      navList: [
        { name: "排行榜", icon: "../../../static/img/1_02.jpg" },
        { name: "精品", icon: "../../../static/img/2_02.jpg" },
        { name: "活动", icon: "../../../static/img/3_02.jpg" },
        { name: "上新", icon: "../../../static/img/4_02.jpg" },
        { name: "免费", icon: "../../../static/img/5_02.jpg" },
      ],
      vipBooks: [],
      hotBooks: [],
      alertFlage: false,
      images: [
        "../../../static/img/v2_qty9ky.png",
        "../../../static/img/v2_qsvpfe.png",
        "../../../static/img/v2_qsvrh0.png",
      ],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$store.dispatch("homes/getDataChange", "推荐");
    API.getTypeBookList({ type: "vip" }).then((res) => {
      res.info.forEach((item, index) => {
        item.typesname = item.typesname.split(",");
      });
      this.vipBooks = res.info;
    });
    API.getTypeBookList({ type: "畅销书" }).then((res) => {
      res.info.forEach((item, index) => {
        item.typesname = item.typesname.split(",");
      });
      this.hotBooks = res.info;
    });
  },
  // Vue方法定义
  methods: {
    //点击navlist中的
    navLick(i) {},
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.home-main-hua {
  width: 100%;
  height: calc(100vh - 4.2432rem);
  overflow-y: auto;
}
.home-top-top {
  width: 100%;
  overflow-x: auto;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.home-box-search {
  width: 89%;
  height: 1.2rem;
  align-items: center;
  margin-left: 6%;
  display: flex;
  justify-content: space-around;
}
.home-box-icon {
  width: 20%;
  display: flex;
  justify-content: space-around;
  color: rgba(229, 229, 229, 229);
}
.home-box-icon span {
  display: inline-block;
  font-size: 24px;
  margin: 0 8px;
}
.el-input__inner {
  border-radius: 35px;
  width: 90%;
  height: 0.8rem;
  background: rgba(229, 229, 229, 0.3);
}
.home-image {
  width: 90%;
  margin-left: 5%;
  height: 3.306667rem;
  position: relative;
  top: 0;
  left: 0;
}
.home-image img {
  width: 100%;
  height: 3.306667rem;
  border-radius: 5px;
}
.home-navlist {
  width: 100%;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  top: 0;
  text-align: center;
}

.home-navlist img {
  width: 0.96rem;
  height: auto;
}
.home-box-row {
  width: 100%;
}
.home-row1 {
  width: 100%;
  height: 5rem;
}
.row1-top {
  width: 100%;
  height: 1.633333rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.row1-top span {
  display: inline-block;
  font-size: 16px;
  color: #999999;
}
.row1-alive {
  width: 100vw;
  overflow-x: auto;
}
.row1-alive-dong {
  width: 130vw;
  height: 5.013333rem;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
}
.some-book {
  width: 2.693333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.some-book img {
  width: 2.52rem;
  height: 3.226667rem;
  border-radius: 5%;
  /* margin-left:calc(calc(2.7rem - 2.22rem)/2); */
}
.some-book h4,
.some-book p {
  width: 100%;
  text-align: left;
  padding: 0 10px;
}
.some-book h4 {
  font-size: 15px;
  font-family: "宋体";
  color: rgba(77, 77, 77, 100);
}
.some-book p {
  color: rgba(153, 153, 153, 100);
  font-size: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.home-row2 {
  width: 100%;
  position: relative;
  top: 1.5rem;
}
.row1-top {
  width: 100%;
  height: 1.633333rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.row2-main {
  width: 90%;
  margin-left: 5%;
}
.row2-main-alive {
  width: 100%;
  height: 3.3rem;
  display: flex;
  justify-content: space-between;
  text-align: left;
  margin-top: 5px;
}

.main-alive-image {
  width: 2.64rem;
  height: 3.2rem;
}
.main-alive-image img {
  width: 100%;
  height: 100%;
}
.xiao {
  position: relative;
  bottom: 0.566667rem;
  left: 5px;
  color: #ffffff;
}
.main-alive-right {
  width: 65%;
  height: 3rem;
  position: relative;
}
.main-alive-right h3 span {
  width: 1.013333rem;
  height: 0.48rem;
  border: 1px solid #ffb887;
  display: inline-block;
  text-align: center;
  line-height: 0.48rem;
  border-radius: 5px;
  color: #ffb887;
  font-size: 12px;
  font-family: PingFangSC-bold;
}
.main-alive-right p:nth-child(2) {
  font-family: PingFangSC-regular;
}

.jies {
  width: 100%;
  min-height: 0.3rem;
  max-height: 0.5rem;
  color: #676767;
  margin-top: 0.133333rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
}
.right-bott {
  width: 100%;
  height: 0.666667rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
}
.right-left {
  width: 75%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  color: #adadad;
  font-size: 12px;
}
.leix {
  width: 45%;
  height: auto;
  padding: 0 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 10px;
}
.leix span {
  width: auto;
  padding: 0 0.5px;
  height: 0.55rem;
  line-height: 0.55rem;
  text-align: center;
  border: 1px solid #adadad;
  border-radius: 3px;
   padding: 0 1px;
}
.home-box {
  width: 100%;
  height: 350px;
}
.right-bott > p:nth-child(2) {
  color: rgba(255, 23, 0, 100);
  font-size: 17px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.home-row3 {
  width: 100%;
  margin: 1.5rem 0;
  /* padding-bottom: 1.566667rem; */
}
.row3-main {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.row3-main-alive {
  width: 48%;
  height: 3.2rem;
  display: flex;
  justify-content: space-between;
}
.row3-main-alive-left {
  width: 1.893333rem;
}
.row3-main-alive-left img {
  width: 100%;
  height: 2.453333rem;
}
.row3-main-alive-right {
  width: 2.586667rem;
  height: 2.453333rem;
  position: relative;
  padding: 0 5px;
  font-family: PingFangSC-bold;
}
.row3-main-alive-right h2 {
  font-size: 13px;
  width: 100%;
}
.row3-main-alive-right p {
  font-size: 12px;
}
.row3-main-alive-right p:nth-child(2) {
  font-size: #676767;
  position: absolute;
  bottom: 10px;
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.row3-main-alive-right p:nth-child(3) {
  color: red;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 5px;
}
.el-input__prefix i {
  line-height: 30px;
}
</style>